<template>
    <el-row>
        <el-col :span="24">
          <Portlet title="商品信息" style="position:relative;">
            <el-form>
              <el-row :gutter="10">
                <el-col :span="12" v-for="(good, index) in productExtBeans" :key="index">
                  <el-row>
                    <el-col :span="12">
                      <el-form-item >
                        <Upload-image :formData="{}" :showPictureNum="true" :readonly="true" :value="handleJsonStringArr(good.pictureId)"></Upload-image>
                      </el-form-item>

                    </el-col>
                    <el-col :span="12">
                      <el-form-item>
                        <p> 商品类别：{{ good.big_class}} {{good.middle_class}}</p>
                        <!--<p> 商品名称：{{ good.name }}</p>-->
                        <p> 商品名称：{{ good.productName }}</p>
                        <!--<p> 商品数量：{{ good.num }}</p>-->
                        <p> 商品数量：{{ good.proudctNum }}</p>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>

            </el-form>
          </Portlet>
          <div style="position:absolute; left:150px; top:17px;font-size:14px;">
            <span>商品类型：</span> <span class="font-red">{{productType}}</span>
          </div>
        </el-col>
    </el-row>
</template>
<script>
import {dotData, handleJsonStringArr} from '@/utils'
export default {
  props: {
    detail: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      // fhbOrderGoods: [
      //   {bigClass: '桌类', name: '产品名称ADFA', num: '1', picture: '5c137adb818563000163c57d'},
      //   {bigClass: '桌类2', name: '产品名称22', num: '2', picture: '5c137adb818563000163c57d'}
      // ]
    }
  },
  computed: {
    productExtBeans() {
      return dotData(this.detail, 'productExtBeans') || []
    },
    productType() {
      let productTypeValue = dotData(this.detail, 'chOrder.productType')
      if (productTypeValue === 1) {
        return '标准产品'
      } else if (productTypeValue === 2) {
        return '通用产品'
      } else if (productTypeValue === 3) {
        return '自定义产品'
      }
      return productTypeValue
    }
  },
  methods: {
    handleJsonStringArr
  }
}
</script>
